<template>
<q-page padding>
  <q-table
    :data="groups"
    :columns="columns"
    row-key="ID"
    class="q-mt-xl"
    selection="single"
    :selected.sync="selected"
  >
    <template v-slot:top>
      <q-btn label="创建分组" color="primary" @click="create" class="q-mr-lg"></q-btn>
      <q-btn label="删除分组" :disable="!selected || selected.length===0" @click="del"></q-btn>
    </template>
    <template v-slot:body-cell-Name="props">
      <q-td class="text-center">
        <span class="cursor-pointer">{{ props.row.Name }}</span>
        <q-popup-edit v-model="props.row.Name" title="设置分组名称">
          <template v-slot="{ set, cancel}">
            <q-input
              autofocus
              dense
              v-model="props.row.Name"
            >
              <template v-slot:after>
                <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel" />
                <q-btn flat dense color="positive" icon="check_circle" @click.stop="save(props.row, set)"/>
              </template>
            </q-input>
          </template>
        </q-popup-edit>
      </q-td>
    </template>
<!--    <template v-slot:body-cell-ChangeSeconds="props">-->
<!--      <q-td class="text-center">-->
<!--        <span class="cursor-pointer">{{ props.row.ChangeSeconds }}</span>-->
<!--        <q-popup-edit v-model.number="props.row.ChangeSeconds" title="设置轮询时间(秒)">-->
<!--          <template v-slot="{ set, cancel}">-->
<!--            <q-input-->
<!--              autofocus-->
<!--              dense-->
<!--              v-model.number="props.row.ChangeSeconds"-->
<!--            >-->
<!--              <template v-slot:after>-->
<!--                <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel" />-->
<!--                <q-btn flat dense color="positive" icon="check_circle" @click.stop="save(props.row, set)"/>-->
<!--              </template>-->
<!--            </q-input>-->
<!--          </template>-->
<!--        </q-popup-edit>-->
<!--      </q-td>-->
<!--    </template>-->
  </q-table>
</q-page>
</template>

<script>
export default {
  name: "Groups",
  data () {
    return {
      groups: [],
      group: {
        ID: 0,
        ChangeSeconds: 0,
        Name: ''
      },
      selected: [],
      columns: [
        {
          name: "ID",
          label: "是否默认",
          field: row => row.ID === 1 ? '是': '否',
          align: 'center'
        },
        {
          name: "Name",
          label: "名称",
          field: "Name",
          align: 'center'
        },
        {
          name: "Url",
          label: "地址",
          field: "Url",
          align: 'center'
        }
      ],
      baseURL: this.$axios.defaults.baseURL
    }
  },
  created() {
    this.$axios.get('/groups').then(data => {
      if (data) {
        for(let group of data) {
          group.Url = this.getGroupUrl(group)
        }
        this.groups = data
      }
    })
  },
  methods: {
    getGroupUrl(group) {
      return `${this.baseURL}/s?ID=${group.ID}`
    },
    create() {
      const group = {
        ID: 0,
        // ChangeSeconds: 5,
        Name: '分组' + (this.groups.length + 1)
      }
      this.$axios.put('/group', group).then(data => {
        if (data) {
          data.Url = this.getGroupUrl(data)
          this.groups.unshift(data)
        }
      })
    },
    del() {
      const group = this.selected[0]
      if (group.ID === 1) {
        this.$q.notify({type: 'negative', message: '不可删除默认分组'})
        this.selected = []
        return
      }
      this.$q.dialog({
        title: `确认删除分组: ${group.Name}？`,
        cancel: true
      }).onOk(() => {
        this.$axios.delete('/group', {params: {ID: group.ID}}).then(data => {
          if (data && data.type === 'success') {
            for (let i = 0; i < this.groups.length; i++) {
              if (this.groups[i].ID === group.ID) {
                this.groups.splice(i, 1)
                this.selected = []
                return
              }
            }
          }
        })
      })
    },
    save(group, done) {
      this.$axios.put('/group', group).then(data=>{
        if (data) {
          done()
          this.$q.notify({type: 'positive', message: '已保存'})
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
